<template>
	<view class="content">
		<view class="list-wraper">
			<view class="tit"><text>订单编号：</text></view>
			<view class="input-all">{{ data.orderId }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>公司简称：</text></view>
			<view class="input-all">{{ data.companyCode }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>客户姓名：</text></view>
			<view class="input-all">{{ data.name }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>联系电话：</text></view>
			<view class="input-all">{{ data.phone }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>面料来源：</text></view>
			<view class="input-all" v-if="data.fabricSource === 1">客户提供</view>
			<view class="input-all" v-else-if="data.fabricSource === 2">公司自有</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>面料名称：</text></view>
			<view class="input-all">{{ data.mlmcName }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>面料宽幅：</text></view>
			<view class="input-all">{{ data.mlkfName }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>打印模式：</text></view>
			<view class="input-all">{{ data.orderMode }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>转印温度：</text></view>
			<view class="input-all">{{ data.zywd }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>转印速度：</text></view>
			<view class="input-all">{{ data.zysd }}</view>
		</view>
		<view class="list-wraper" v-if="status != 2">
			<view class="tit"><text>订单总量：</text></view>
			<view class="input-all">{{ data.totalNumber }}</view>
		</view>
		<view class="list-wraper" v-if="status >= 4">
			<view class="tit"><text>打印人员：</text></view>
			<view class="input-all">{{ data.dyName }}</view>
		</view>
		<view class="list-wraper" v-if="status >= 6">
			<view class="tit"><text>打印完成量：</text></view>
			<view class="input-all">{{ data.dyNumber }}</view>
		</view>
		<view class="list-wraper" v-if="status >= 6">
			<view class="tit"><text>转印人员：</text></view>
			<view class="input-all">{{ data.zyName }}</view>
		</view>
		<view class="list-wraper" v-if="status >= 8">
			<view class="tit"><text>转印完成量：</text></view>
			<view class="input-all">{{ data.zyNumber }}</view>
		</view>
		<view class="list-wraper" v-if="status >= 9">
			<view class="tit"><text>发货量：</text></view>
			<view class="input-all">{{ data.fhNumber }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>交货日期：</text></view>
			<view class="input-all">
				<u-button @click="openCalendar">{{ data.receiptTime != null ? data.receiptTime : receiptTime }}</u-button>
				<u-picker mode="time" v-model="showCalendar" :params="timeParams" @confirm="selCalendar"></u-picker>
			</view>
		</view>
		<view class="tips ind-wraper">
			<view class="type-title"><text>订单花型信息：</text></view>
			<view class="type-list-wraper" v-for="(item, index) in imgDetail" :key="item.id">
				<view class="img">
					<u-image
						:src="$http.baseUrl + item.imgPath"
						:lazy-load="true"
						@error="imageError"
						width="120rpx"
						height="120rpx"
						@click="showPhoto($http.baseUrl + item.imgPath)"
					>
						<u-loading slot="loading"></u-loading>
					</u-image>
				</view>
				<view class="text">
					<view class="inpt">花型名称：{{ item.fileName }}</view>
					<view class="inpt">订单总量：{{ item.number != null ? item.number : 0 }}</view>
					<view class="inpt" v-if="status >= 6">已交付量：{{ item.completedNumber != null ? item.completedNumber : 0 }}</view>
				</view>
				<view class="btn" v-if="status <= 4">
					<u-button type="success" size="mini" @click="showInputNumber(index,item.number,item.completedNumber)">修改数量</u-button>
					</view>
				<!-- <view class="btn" v-else-if="dyStatus === 0"><u-button type="success" size="mini" @click="showInputNumber(index)">修改数量</u-button></view> -->
			</view>
		</view>
		<view class="list-wraper">
			<u-button type="primary" size="medium" @click="submit" v-if="status === '2' ">确认订单</u-button>
			<u-button type="primary" size="medium" @click="updateOrderStatusSubmit" v-if="status === '2'">
				{{statusText}}
			</u-button>
			<u-button type="primary" size="medium" @click="submit" v-else-if="status === '3' || status === '4'">保存</u-button>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" :value="inputNumber" title="设置花型数量" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderId: '',
			data: {},
			imgDetail: [],
			deptId: uni.getStorageSync('deptId'),
			userName: uni.getStorageSync('userName'),
			thisIndex: 0,
			showCalendar: false,
			receiptTime: '选择交货日期',
			status: '',
			dyStatus:'',
			orderStatus:0,
			statusText:'',
			inputNumber:0,
			timeParams:{
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: false,
				second: false
			}
		};
	},
	onLoad: function(option) {
		this.orderId = option.orderId;
		this.status = option.status;
		this.getData();
	},
	methods: {
		getData() {
			this.$http
				.post('/ywRest/getDesignerById', {
					orderId: this.orderId
				})
				.then(res => {
					if (res.data.code == '0') {
						this.data = res.data.data;
						this.imgDetail = this.data.imgDetail;
						this.dyStatus = this.data.dyStatus;
						this.orderStatus = this.data.orderStatus;
						if(this.orderStatus === 1){
							this.statusText = '后台挂起'
						}else{
							this.statusText = '重新启用'
						}
						if(this.data.receiptTime){
							this.receiptTime = this.data.receiptTime;
						}
					}
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'none'
					});
				});
		},
		showInputNumber(index,number,completedNumber) {
			this.thisIndex = index;
			//设置弹出框默认值
			let thisNumber = number - completedNumber;
			if(thisNumber>0){
				this.inputNumber = thisNumber
			}
			this.$refs.popup.open('center');
		},
		showPhoto(url) {
			// 预览图片
			var imgArr = [];
			imgArr.push(url);
			//预览图片
			uni.previewImage({
				urls: imgArr,
				current: imgArr[0]
			});
		},
		close() {
			this.$refs.popup.close();
		},
		confirm(value) {
			if (/^[1-9]\d*$/.test(value)) {
				this.$set(this.imgDetail[this.thisIndex], 'number', value);
				this.$refs.popup.close();
			} else {
				uni.showToast({
					title: '修改失败，花型数量需大于0',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
		},
		imageError(e) {
			console.error(e.detail.errMsg);
		},
		submit() {
			if (this.receiptTime == '选择交货日期') {
				uni.showToast({
					title: '请选择交货日期',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			for (var i = 0; i < this.imgDetail.length; i++) {
				let dtl = this.imgDetail[i];
				if (!dtl.number) {
					uni.showToast({
						title: '请填写花型数量',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
			}
			let order = {
				orderId: this.orderId,
				deptId: this.deptId,
				userName: this.userName,
				receiptTime: this.receiptTime,
				designerImg: this.imgDetail
			};
			this.$http
				.post('/ywRest/insertBaseOrder', {
					order: JSON.stringify(order)
				})
				.then(res => {
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'none'
					});
					if (res.data.code == '0') {
						uni.navigateBack({
						  success: () => {
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 2]; // 前一个页面
							if (beforePage == undefined || beforePage == null) {
								beforePage.getData(); //执行上个页面的方法
							}
						  }
						});
					}
				});
		},
		openCalendar() {
			this.showCalendar = true;
		},
		selCalendar(e) {
			this.receiptTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour+':00:00';
		},
		updateOrderStatus(){
			let status = 1
			if(this.orderStatus === 1){
				this.statusText = '后台挂起'
				status = 2;
			}
			this.$http
				.post('/ywRest/updateOrderStatus', {
					orderId: this.orderId,
					orderStatus:status,
					userName:this.userName,
					deptId:this.deptId
				})
				.then(res => {
					if (res.data.code == '0') {
						uni.navigateBack({
						  success: () => {
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 2]; // 前一个页面
							if (beforePage == undefined || beforePage == null) {
								beforePage.getData(); //执行上个页面的方法
							}
						  }
						});
					}
				});
		},
		updateOrderStatusSubmit(){
			uni.showModal({
			    title: '提示',
			    content: '是否'+this.statusText,
			    success: function (res) {
			        if (res.confirm) {
			            this.updateOrderStatus();
			        } else if (res.cancel) {
			            
			        }
			    }.bind(this)
			});
		}
	}
};
</script>
<style>
page {
	background: #f5f5f5;
	width: 100%;
	height: 100%;
}
.h-20upx {
	height: 20upx;
	display: flex;
}
.tips {
	display: flex;
	width: 100%;
	padding: 20upx 30upx;
	background-color: #ffffff;
}
.type-title {
	width: 94%;
	font-size: 28upx;
	height: 60upx;
	color: #2979ff;
}
.tips_right {
	width: 5%;
}
.tips_right image {
	width: 40upx;
	height: 40upx;
}
.input-logo {
	width: 120upx;
	height: 120upx;
	line-height: 120upx;
	text-align: center;
	font-size: 27upx;
	color: #444444;
}
.input-logo image {
	width: 120upx;
	height: 120upx;
}
.input-Image {
	width: 420upx;
	height: 320upx;
	line-height: 320upx;
	text-align: center;
	font-size: 27upx;
	border: 1upx #cccccc solid;
	color: #444444;
}
.input-Image image {
	width: 420upx;
	height: 320upx;
}
.radio {
	font-size: 28upx;
	transform: scale(0.7);
}
</style>
<style lang="scss" scoped>
.slot-content {
	font-size: 28rpx;
	color: $u-content-color;
	padding-left: 30rpx;
}
</style>
<style scoped lang="stylus" ref="stylesheet/stylus">
.content
	width 100%
	display flex
	flex-direction column
	color #333333
	.list-wraper
		position relative
		display flex
		align-items center
		width 100%
		padding 20upx 30upx
		background #FFFFFF
		.tit
			flex 1.5
			text
				font-size 28upx

		.input-all
			flex 4
			.inpt
				// background red
				padding-top 6upx
				font-size 28upx
	.type-list-wraper
		position relative
		display flex
		align-items center
		width 100%
		padding 20upx 30upx
		background #FFFFFF
		border-bottom 1rpx #CCCCCC solid
		.img
			flex 2
			text
				font-size 28upx
		.text
			flex 5
			.inpt
				// background red
				padding-top 6upx
				font-size 28upx
	.logo-wraper
		.input-all
			text-align right
			image
				width 100upx
				height 100upx

	.list-wraper::after
		position absolute
		content ""
		width calc(100% - 60upx)
		height 2upx
		left 30upx
		bottom 0
		background #CCCCCC
	.ind-wraper
		flex-direction column
		justify-content left
		.tit
			width 100%
		.input-lg
			width 100%
			padding 20upx 10upx
			// background red
			.lg-text
				font-size 24upx
				color #777777
	.btn-box
		width 100%;
		padding 40upx 30upx
</style>
